<template>

    <section>
        <!--产品详情查看-->
        <div>
            <el-col :span="8" style="margin-top: 15px; ">


                <el-form v-loading="loading" :model="userInfo" :rules="userRules"
                         ref="userInfo" label-width="100px"
                         class="demo-fundProduct">

                    <div class="product-row">
                        <el-col :span="20" :push="1">
                            <el-form-item label="用户名:" prop="user_name">
                                <el-input placeholder="用户名" type="text" v-model="userInfo.user_name"
                                          disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </div>

                    <div class="product-row">
                        <el-col :span="20" :push="1">
                            <el-form-item label="新密码:" prop="new_password">
                                <el-input id="new_password" placeholder="新密码" type="password" v-model="userInfo.new_password"></el-input>
                            </el-form-item>
                        </el-col>
                    </div>

                    <div class="product-row">
                        <el-col :span="20" :push="1">
                            <el-form-item label="确认新密码:" prop="con_password">
                                <el-input placeholder="确认新密码" type="password"
                                          v-model="userInfo.con_password"></el-input>
                            </el-form-item>
                        </el-col>
                    </div>

                </el-form>
                <el-col align="center">
                    <el-button type="primary" @click="submit('userInfo')">修改
                    </el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-col>
            </el-col>

        </div>
    </section>
</template>

<script>
    import * as api from "../../api/auth_api";
    import {password} from "../../common/js/checkFields";

    export default {
        data() {
            var validCPassword = (rule, value, callback) => {
                if (value !== this.userInfo.new_password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                loading: false,
                userInfo: {
                    id: "",
                    user_name: "",
                    new_password: "",
                    con_password: ""
                },
                userRules: {
                    user_name: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    new_password: [
                        {required: true, validator: password, trigger: 'blur'}
                    ],
                    con_password: [
                        {required: true, validator: password, trigger: 'blur'},
                        {validator: validCPassword, trigger: 'blur'}
                    ],
                }
            }
        },
        methods: {
            cancel() {
                this.$router.push('/system/user');
            },
            submit(formName) {
                let params = {
                    id: this.userInfo.id,
                    new_password: this.userInfo.new_password
                };

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('确认重置吗?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            api.resetUserPassword(params).then(res => {
                                    if (res.data.code == 200) {
                                        this.$message({
                                            type: 'success',
                                            message: '重置密码成功'
                                        });
                                        this.$router.push('/system/user');
                                    } else {
                                        this.$message({
                                            type: 'error',
                                            message: res.data.msg
                                        });
                                    }
                                }
                            );


                        }).catch(() => {
                        });

                    }
                });
            },
            initUser() {
                let params = {
                    id: this.$route.params.id
                };
                api.userInfo(params).then((res) => {
                    if (res.data.status == 200) {

                        this.userInfo = JSON.parse(res.data.datas);
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }
                });
            }
            ,
            initData() {
                this.initUser();
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();  //初始化页面数据
            })

        }

    }
</script>

<style scoped>

    .product-row {
        width: 100%;
        float: left;
    }
</style>